<template>
  <div class="app-container" v-loading="loading">
    <el-row type="flex" style="justify-content: space-between;">
      <div style="flex: 1;min-width: 0;margin-top: 20px;margin-right: 15px;">
        <carModel v-model="form" />
        <vehicleInformation v-model="form" ref="refDetailForm" :state="$route.query.type" />
        <carUpload v-model="form" :state="$route.query.type" />
      </div>
      <FlowRecord v-if="form.flowId" :id="form.flowId" />
    </el-row>
    <!--按钮  -->
    <div style="border-radius: 8px;text-align: right; margin-top: 20px; background-color: #fff;height: 60px;line-height: 60px;box-sizing: border-box;padding-right: 20px;" v-if="$route.query.type !== 'view'">
      <el-button @click="onCancel">取 消</el-button>
      <el-button plain type="primary" @click="onSave" v-hasPermi="['sublease:subleaseView:save']">保 存</el-button>
      <el-button @click="onSubmit" type="primary" v-hasPermi="['sublease:subleaseView:submit']">提 交</el-button>
    </div>
    <div style="border-radius: 8px; text-align: right; margin-top: 20px; background-color: #fff;padding: 10px;box-sizing: border-box;" v-if="$route.query.type == 'view'">
      <el-button @click="onCancel">返 回</el-button>
    </div>
  </div>
</template>

<script>
import carModel from "./components/carModel";
import carUpload from "./components/carUpload";
import vehicleInformation from "./components/vehicleInformation";
import {
  getSublease,
  outChangeRen,
  outChangeRenSubmit,
} from "@/api/purchaseManage/sublease";

export default {
  name: "SubleaseView",
  components: {
    carModel,
    carUpload,
    vehicleInformation,
  },
  data() {
    return {
      form: {},
      loading: false,
    };
  },
  created() {
    this.getDataObj();
  },
  methods: {
    async getDataObj() {
      this.loading = true
      try {
        let res = await getSublease(this.$route.query.id);
        this.form = res.data;
        this.loading = false
      } catch (error) {
        this.loading = false
      }
    },
    onSave() {
      //   if (this.$refs.refDetailForm.handleEffect()) {
      const loading = this.$loading({
        lock: true,
        text: "保存中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      outChangeRen(this.form)
        .then((res) => {
          loading.close();
          this.$message.success("保存成功");
          this.onCancel();
        })
        .catch((error) => {
          loading.close();
        });
      //   } else {
      //     this.$refs.refDetailForm.error();
      //   }
    },
    onCancel() {
      this.$tab.closeOpenPage(this.$route);
      this._toPage({
        name: "SubleaseList",
      });
    },
    onSubmit() {
      if (this.$refs.refDetailForm.handleEffect()) {
        let NumberTotalSelect = this.form.infoVo.length > 0 ? this.form.infoVo.reduce((num, obj) => (Number(num) + Number(obj.carNumber)), 0) : 0
        let NumberTotal = this.$refs?.refDetailForm.dataList.length > 0 ? this.$refs?.refDetailForm.dataList.reduce((num, obj) => (Number(num) + Number(obj.needProcureNumber)), 0) : 0
        console.log('弹窗总和', NumberTotal, '选中的数据', NumberTotalSelect);
        if (NumberTotalSelect < NumberTotal) {
          return this.$message.error("还有剩余采购台数");
        } else if (NumberTotalSelect > NumberTotal) {
          return this.$message.error("超过最大可采购台数");
        } else {
          const loading = this.$loading({
            lock: true,
            text: "提交中",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });
          outChangeRenSubmit(this.form)
            .then((res) => {
              loading.close();
              this.$message.success("提交成功");
              this.onCancel();
            })
            .catch((error) => {
              loading.close();
            });
        }
      } else {
        this.$refs.refDetailForm.error();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  overflow: auto;
}
</style>


